<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "0px"
    },
    height: {
      type: String,
      default: "0px"
    },
    data: {},
    maxdata: ''
  },
  data() {
    return {
      chart: null,
      color: ['#0780ED', '#00AFC3', '#44d428', '#ff5227'],
      //  color: ["#00AFC3", "#44D428", "#FF9200", "#B06EF3", "#68C4FD", "#FF5227", "#AE716E", "#0050E2", "#F6D159", "#911FA8"]
    }
  },
  computed: {
    origin() {
      return this.data
    },
    opt() {
      let opt = {
        color: this.color,
        xAxis: {
          // 是否显示
          show: true,
          // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
          scale: true,
          // 坐标轴类型
          type: "category",
          // 坐标轴轴线相关设置
          axisLine: {
            // 坐标轴样式
            lineStyle: {
              // 坐标轴颜色
              // color: "#000000"
            }
          },
          // 坐标轴刻度相关设置
          axisTick: {
            // 是否显示坐标轴刻度
            show: false
          },

          // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          // boundaryGap: false,
          // 坐标轴刻度标签的相关设置
          axisLabel: {
            // 坐标轴刻度颜色
            // color: "#000000"
          },
          data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
            return item.time
          }) : null
        },
        dataZoom: [
          // 滑动条型数据区域缩放组件
          {
            show: true,
            type: "slider",
            // 滚动条高度
            height: 40,
            // 滚动条近距离底部距离
            bottom: 0,
            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。默认0
            start: 0,
            // 数据窗口范围的结束百分比。范围是：0 ~ 100。默认100
            end: 100,
            // 手柄的样式配置
            handleStyle: {
              // 手柄颜色 默认#a7b7cc
              color: false
            },
            // 文字样式
            textStyle: {
              //  文字的颜色 默认#333
              color: false
            }
          },
          // 内置型数据区域缩放组件
          {
            type: "inside"
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#e5e5e5"
            }
          },
          formatter(p) {
            var y_name = p[0].name
            p.forEach((item, index) => {
              y_name += `<p>${item.marker}${item.seriesName}：${
                item.value.length > 1 ? item.value[1] : item.value
                } kW</p>`
            })
            return y_name
          },
        },
        legend: {
          type:'scroll',
          // left: 80,
          // 图例标记的图形宽度。默认25px
          itemWidth: 20,
          // 图例标记的图形高度。默认14px
          itemHeight: 10,
          // 图例的公用文本样式。
          textStyle: {
            // 文字颜色
            // color: "#000000",
            // 文字大小
            // fontSize: "12"
          },
          data: [
            { name: "容量平衡点", icon: "circle", textStyle: { color: '#0780ED' } },
            { name: "实时需量", icon: "circle", textStyle: { color: '#00AFC3' } },
            { name: "核定最大需量", icon: "circle", textStyle: { color: '#44d428' } },
            { name: "日最大需量", icon: "circle", textStyle: { color: '#ff5227' } },
          ]
        },
        calculable: true,
        // 直角坐标系内绘图网格
        grid: {
          // grid 组件离容器左侧的距离。默认10%
          left: 80,
          // grid 组件离容器右侧的距离。默认10%
          right: 30,
          // grid 组件离容器下侧的距离。默认60px。值可以是像60这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          bottom: 80
        },
        yAxis: [
          {
            // 坐标轴名称。
            name: 'kW',
            // 坐标轴名称的文字样式。
            nameTextStyle: {
              padding: [0, 25, 28, 0]
            },
            // 坐标轴类型
            type: "value",
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴在 grid 区域中的分隔线
            splitLine: {
              // 是否显示
              show: false,
              lineStyle: {
                color: "#e5e5e5",
                //分隔线的类型 可选'solid' 'dashed''dotted'
                type: "dotted"
              }
            },
            // 坐标轴轴线相关设置。
            axisLine: {
              // 是否显示
              // show: true,
              lineStyle: {
                // 坐标轴线线的颜色。
                // color: "#000000"
                // 坐标轴线线的宽度
                // width: 1
                width: 0
              }
            },

            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            }
          }
        ],
        series: [
          {
            name: '容量平衡点',
            type: "line",
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  // width: 2
                }
              }
            },

            data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
              return this.origin.loadDemand
            }) : null
          },
          {
            name: '实时需量',
            symbolSize: 10,
            data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
              return item.value
            }) : null,
            type: 'scatter',
            animation: false,

          },
          {
            name: '核定最大需量',
            type: "line",
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  // width: 2
                }
              }
            },
            data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
              return this.origin.loadDemand * 0.4
            }) : null
          },
          {
            name: '日最大需量',
            type: "line",
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  // width: 20
                }
              }
            },
            data: this.origin.dataResp ? this.origin.dataResp.map((item, i) => {
              return this.maxdata
            }) : null
          },

        ]
      }
      return opt
    }
  },
   watch: {
    origin() {
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 1)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
    // rgba_color(color) {
    //   var color_arr = []
    //   for (let i = 0; i < color.length ;i++) {
    //     let num = color[i].split("#")[1]
    //     color_arr.push({
    //       a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
    //         "0x" + num.substr(2, 2)
    //       )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
    //       b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
    //         "0x" + num.substr(2, 2)
    //       )},${parseInt("0x" + num.substr(4, 2))},0.1)`
    //     })
    //   }
    //   return color_arr
    // }
  }
}
</script>
